<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.demo.knowledgeManager.addProperty')"
      @register="register"
      :destroyOnClose="true"
      :minHeight="300"
      :width="600"
      @ok="handleOk"
    >
      <Form ref="formRef" :model="formState" v-bind="formItemLayoutWithOutLabel">
        <FormItem :label="t('routes.demo.knowledgeManager.label')" v-bind="formItemLayout">
          <TreeSelect
            v-model:value="formState.labelName"
            show-search
            tree-checkable
            style="width: 80%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :placeholder="t('routes.demo.knowledgeManager.selectLabel')"
            :tree-data="addKey(props.labelList)"
            :replaceFields="{
              key: 'keyValues',
              value: 'labelID',
              title: 'labelName',
              children: 'sonlabellist',
            }"
            allow-clear
          />
        </FormItem>
      </Form>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Form, FormItem, TreeSelect } from 'ant-design-vue';
  import { ref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { getBorrowBdDataUpdateLabel } from '/@/api/demo/knowledge';

  const { t } = useI18n();
  const props = defineProps({
    labelList: { type: Array, default: () => [] },
  });

  // 定义弹窗是否可见
  const [register, { closeModal }] = useModalInner((data) => {
    recordList.value = data;
    formState.value.labelName = data.labelIdList;
  });

  const emit = defineEmits(['success', 'register']);
  const { createMessage } = useMessage();

  // 表单
  const formRef = ref();
  const formState = ref({
    labelName: '',
  });
  const recordList = ref<any>({});
  // 表单-关键字
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };
  const formItemLayoutWithOutLabel = {
    wrapperCol: {
      xs: { span: 24, offset: 0 },
      sm: { span: 20, offset: 4 },
    },
  };

  // 传参： treeData: 树形数据
  const addKey = (labelList) => {
    return labelList.map((item: any) => ({
      ...item,
      disabled: item.sonlabellist?.length > 0 ? true : false,
      sonlabellist: item.sonlabellist ? addKey(item.sonlabellist) : [],
    }));
  };

  // 确定
  const handleOk = () => {
    try {
      const params = {
        labelIdList: formState.value.labelName,
        oid: recordList.value.oId,
      };
      getBorrowBdDataUpdateLabel(params).then(() => {
        closeModal();
        emit('success');
        createMessage.success(t('common.saveSuccess'));
      });
    } finally {
      closeModal();
    }
  };
</script>
<style lang="less" scoped>
  ::v-deep(.rc-virtual-list-scrollbar-thumb) {
    visibility: hidden !important;
  }

  ::v-deep(.ant-calendar-picker) {
    width: 100% !important;
  }

  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 50%;
  }
</style>
